<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../res/vue.js"></script>
</head>
<body>
<div id="app-1">
    <div>
        <div v-html="rawHtml"></div>
        <a v-bind:href="url" v-bind:title="url | filterHttp1('12','32')" >百度么？</a>
        <a :href="url" :title="url | filterHttp('12','32')" >缩写绑定v-bind</a>
    </div>
    <p>{{number+1}}</p>
    <p>{{ok ? 'yes':'no' }}</p>
    <p>{{message.split('').reverse().join('')}}</p>
    <p>{{Math.random()}}</p>
    <p><a v-bind:href="'http'+url">11</a></p>
    <p>
        <span v-if="number == 1 ">输出1</span>
        <span v-if="number == 2 ">输出2</span>
        <span v-if="number+1 == 2 ">输出2</span>
    </p>
    <p>{{lightColor3| filterColor | filterPass }}</p>
    <p>{{lightColor1| filterColor | filterPass }}</p>
    <p>{{lightColor2| filterColor | filterPass }}</p>
</div>
<script type="text/javascript">
    var app1 = new Vue({
        el:'#app-1',
        data:{
            number:1,
            ok:true,
            url:'http://www.baidu.com',
            rawHtml:'<div><p>你好啊{{name}}</p></div>',
            name:'张三',
            message:'如何成为屌丝',
            remark:'备注信息',
            wife:'潘女士',
            child:'潘小聪',
            lightColor3:'0',
            lightColor1:'1',
            lightColor2:'2'
        },
        filters:{
            filterHttp:function (value,arg1,arg2) {
                console.log(value);
                if(value.indexOf("baidu")!=-1){
                    return "百度"
                }
            },
            filterColor:function(value){
                console.log("filterColor : "+value);
                return ["红灯","黄灯","绿灯"][value];
            },
             filterPass:function (value) {
                console.log("filterPass : "+value);
                return   ["停","等","行"][value]
            }
        }
    });
</script>
</body>
</html>